<template>
  <basic-dialog :visible="show"
                title="快捷入口"
                :isShowInnerLoading="isShowInnerLoading"
                min-width="760px"
                isShowBasicFooter
                @close="$emit('close')"
                @submit="onSubmit"
  >
    <div class="enter-container">
      <div class="menu-wrapper" v-for="(menu, menuIndex) in menuList" :key="menuIndex">
        <div class="title">{{menu.name}}</div>
        <div class="content-wrapper flex justify-between items-center" v-for="(item, childIndex) in menu.children" :key="childIndex">
          <div class="content">{{ item.name }}</div>
          <div class="icon-wrapper cursor-pointer">
            <q-icon v-if="!item.save" class="icon-sel" style="font-size: 16px;margin-top: 1px" name="iconfont icontubiao5-44" @click="saveItem(item)" />
            <q-icon v-else style="font-size: 16px;color: #5f77fd" name="iconfont icontubiao5-43" @click="cancelItem(item)" />
          </div>
        </div>
      </div>
    </div>
  </basic-dialog>
</template>

<script>
import _ from 'lodash'
import { menuListData } from '../../../../assets/js/menu-list'
import { mapGetters } from 'vuex'
import { setQuickEntryPrivileges } from '../../../../boot/home/home'

export default {
  name: 'EnterDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    selectedListSaved: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      isShowInnerLoading: false,
      menuList: [],
      selectedList: []
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'permissions'
    ])
  },
  watch: {
    show (val) {
      if (val) {
        this.getMenuData()
      }
    },
    selectedListSaved: {
      deep: true,
      immediate: true,
      handler (val) {
        this.selectedList = _.cloneDeep(val)
      }
    }
  },
  methods: {
    onSubmit () {
      setQuickEntryPrivileges(this.selectedList).then(() => {
        this.$emit('setSuccess')
      })
    },
    // 获取菜单数据
    getMenuData () {
      const menuPage = Object.entries(this.Enums.SYS_PERMISSION)
        .filter(entry => entry[1].type === 'MENU_LEVEL_ONE' && this.permissions.indexOf(entry[1].value) > -1)
      const subMenuPage = Object.entries(this.Enums.SYS_PERMISSION)
        .filter(entry => entry[1].type === 'PAGE' && this.permissions.indexOf(entry[1].value) > -1)
      const menuList = []
      const menuData = _.cloneDeep(menuListData)
      menuPage.forEach(item => {
        // 获取一级菜单
        const menu = menuData.find(menu => menu.desc === item[1].name)
        // 获取一级菜单编号
        const parentId = item[1].value
        // 根据菜单编号筛选二级菜单
        const subListList = subMenuPage.filter(submenu => submenu[1].parentId === parentId)
        menu.children = subListList.map(item => {
          return menu.children.find(m => {
            if (m.desc === item[1].name) {
              m.menuId = item[1].value
              return true
            }
          })
        })
        // 设置save属性，如果已经在selectedList中就为true，否则为false
        menu.children.forEach(item => {
          item.save = this.selectedList.indexOf(Number(item.menuId)) > -1
        })
        menuList.push(menu)
      })
      this.menuList = menuList
    },
    // 保存快捷入口
    saveItem (item) {
      if (this.selectedList.length === 18) {
        this.$message.warning('最多添加18个快捷入口')
        return
      }
      const index = this.selectedList.findIndex(sel => Number(sel) === Number(item.menuId))
      if (index === -1) {
        this.selectedList.push(item.menuId)
      }
      item.save = true
    },
    // 取消保存快捷入口
    cancelItem (item) {
      const index = this.selectedList.findIndex(sel => Number(sel) === Number(item.menuId))
      if (index > -1) {
        this.selectedList.splice(index, 1)
      }
      item.save = false
    }
  }
}
</script>

<style scoped lang="scss">
.enter-container{
  height: 584px;
  padding: 0px 0px 10px 40px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

  .menu-wrapper{
    display: flex;
    flex-direction: column;
    width: 150px;
    padding-right: 40px;

    .title {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20px;
      line-height: 1;
      margin-top: 20px;
    }

    .content-wrapper{
      width: 110px;
      line-height: 1;
      margin-bottom: 15px;

      position: relative;

      &::after{
        display: none;
        content: '';
        width: 100%;
        height: 1px;
        background-color: #5f77fd;
        position: absolute;
        bottom: -5px;
        left: 0;
      }

      &:hover {
        color: #5f77fd;
        &::after{
          display: block;
        }
        .icon-wrapper{
          .icon-sel{
            display: block;
          }
        }
      }

      .icon-wrapper{
        height: 14px;
        margin-top: -2px;
        .icon-sel{
          display: none;
        }
      }
    }
  }
}
</style>
